<template>
  <el-button type="danger" icon="el-icon-delete" v-on:click="btnDelMany" style="margin-right: 10px">批量删除</el-button>
  <el-input v-model="deptName" placeholder="部门" style="width: 250px;margin-right: 10px;margin-bottom: 10px"/>
  <el-input v-model="manager_name" placeholder="经理" style="width: 250px;margin-right: 10px"/>
  <!--  <el-input v-model="input" placeholder="状态" style="width: 250px;margin-right: 10px"/>-->
  <el-select v-model="stateValue" class="m-2" placeholder="状态" style="margin-right: 10px">
    <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
    >
    </el-option>
  </el-select>
  <el-button type="success" icon="el-icon-search" @click="btnQuery">Search</el-button>
  <el-button type="success" icon="el-icon-circle-plus-outline" @click="btnInsert" style="float: right">Insert
  </el-button>
  <el-table :data="tableData" border @selection-change="handleSelectionChange" stripe style="width: 100%">
    <el-table-column type="selection" width="55"/>
    <el-table-column prop="id" label="部门编号" width="80px"/>
    <el-table-column prop="name" label="部门名称"/>
    <el-table-column prop="sn" label="部门别名"/>
    <el-table-column prop="dirPath" label="部门路径"/>
    <el-table-column prop="state" label="部门状态">
      <template #default="scope">
        <span v-if="!scope.row.state" style="color: lime">启用</span>
        <span v-else style="color: red;">禁用</span>
      </template>
    </el-table-column>
    <el-table-column prop="manager.username" label="部门经理"/>
    <el-table-column prop="parent.name" label="上级部门"/>
    <el-table-column label="操作" width="180px">
      <template #default="scope">
        <el-button size="small" type="success" @click="handleEdit(scope.$index, scope.row)"
        >编 辑
        </el-button>
        <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
        >删 除
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <!--  抽屉框-->
  <el-drawer v-model="drawer" title="部门信息编辑" :with-header="true" :size="drawerSize">

    <el-form :model="form">
      <el-form-item label="部门编号：" hidden :label-width="formLabelWidth">
        <el-input v-model="form.id" autocomplete="off" style="width: 80%"></el-input>
      </el-form-item>
      <el-form-item label="部门名称：" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" style="width: 80%"></el-input>
      </el-form-item>
      <el-form-item label="部门别名：" :label-width="formLabelWidth">
        <el-input v-model="form.sn" autocomplete="off" style="width: 80%"></el-input>
      </el-form-item>
      <el-form-item label="部门路径：" :label-width="formLabelWidth">
        <el-input v-model="form.dirPath" autocomplete="off" style="width: 80%"></el-input>
      </el-form-item>
      <el-form-item label="部门状态：" :label-width="formLabelWidth">
        <el-switch
            v-model="form.state"
            class="ml-2"
            active-color="#13ce66"
            inactive-color="#ff4949"
        />
      </el-form-item>
      <el-form-item label="部门经理：" :label-width="formLabelWidth">
        <!--        <el-input v-model="form.managerId" autocomplete="off" style="width: 80%"></el-input>-->
        <el-select v-model="form.managerId" class="m-2" placeholder="未选择" style="margin-right: 10px;width: 80%">
          <el-option
              v-for="item in managers"
              :key="item.id"
              :label="item.username"
              :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="上级部门：" :label-width="formLabelWidth">
        <!--        <el-input v-model="form.parentId" autocomplete="off" style="width: 80%"></el-input>-->
        <el-select v-model="form.parentId" class="m-2" placeholder="未选择" style="margin-right: 10px;width: 80%">
          <el-option
              v-for="item in parents"
              :key="item.id"
              :label="item.name"
              :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <div class="demo-drawer__footer" style="float: right;margin-right: 85px">
      <el-button @click="drawer = false"> 取消</el-button>
      <el-button type="primary" @click="btnEdit()"
      > 确认
      </el-button
      >
    </div>
  </el-drawer>
  <!--  分页查询-->
  <div class="demo-pagination-block">
    <el-pagination
        v-model:currentPage="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5, 8, 10, 20]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
  <!--  <el-button type="primary" v-on:click="btnDelMany">Primary</el-button>-->
</template>

<script>
import {onMounted, ref, reactive} from "vue";
import {delDept, delDepts, loadAll, loadAllDept, loadAllEmp, update} from "@/api/dept";
import {ElMessage, ElMessageBox} from "element-plus";

export default {
  setup() {
    const dialogTableVisible = ref(false)
    const dialogFormVisible = ref(false)
    const formLabelWidth = '120px'
    const form = reactive({
      id: '',
      name: '',
      sn: '',
      dirPath: '',
      state: false,
      managerId: '',
      parentId: '',
    })
    // 表单数据清空
    const clearForm = () => {
      form.id = ''
      form.name = ''
      form.sn = ''
      form.dirPath = ''
      form.state = false
      form.managerId = ''
      form.parentId = ''
    }
    const stateValue = ref()
    // 设置状态选项
    const options = [
      {
        value: '',
        label: '',
      },
      {
        value: '0',
        label: '启用',
      },
      {
        value: '-1',
        label: '禁用',
      },
    ]
    const managers = ref('')
    const parents = ref('')
    const selectionDel = ref('')
    const handleSelectionChange = (rows) => {
      selectionDel.value = rows
    }
    const btnDelMany = () => {
      ElMessageBox.confirm(
          '确认批量删除？',
          'Warning',
          {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
          }
      ).then(() => {
        delDepts(JSON.stringify(selectionDel.value))
        ElMessage({
          type: 'success',
          message: '批量删除成功',
        })
        // 重新加载表格
        btnQuery()
      }).catch(() => {
        ElMessage({
          type: 'info',
          message: '删除失败',
        })
      })
    }
    const drawerSize = ref('35%')
    const drawer = ref(false)
    let tableData = ref()
    const deptName = ref('')
    const manager_name = ref('')
    const total = ref('')
    const currentPage = ref(1)
    const pageSize = ref(5)
    const small = ref(false)
    const background = ref(false)
    const disabled = ref(false)
    // 分页功能的实现
    const load = (current, size, deptName, manager_name, state) => {
      loadAll({
        "currentPage": current,
        "pageSize": size,
        "name": deptName,
        "manager_name": manager_name,
        "state": state
      }).then(res => {
        // console.log(res)
        console.log(res)
        tableData.value = res.data.list
        total.value = res.data.total
      }).catch(e => {
        console.log(e)
      })
    }
    // 重新加载表格
    // 模糊查询
    const btnQuery = () => {
      load(currentPage.value, pageSize.value, deptName.value, manager_name.value, stateValue.value)
    }

    const btnInsert = () => {
      // 数据清空
      clearForm()
      drawer.value = true
    }

    // 修改功能
    const handleEdit = (index, row) => {
      console.log(row)
      // 数据清空
      clearForm()
      console.log(row)
      // 点击之后--出现模态框
      drawer.value = true
      // 数据回写
      form.id = row.id
      form.name = row.name
      form.sn = row.sn
      form.state = row.state === 0
      form.dirPath = row.dirPath
      form.managerId = row.manager.id
      form.parentId = row.parent.id
      // console.log(row.parent.row)
    }

    // 确认修改 保存修改功能
    const btnEdit = () => {
      drawer.value = false
      update({
        id: form.id,
        name: form.name,
        sn: form.sn,
        state: form.state ? 0 : -1,
        dirPath: form.dirPath,
        manager: {
          id: form.managerId,
        },
        parent: {
          id: form.parentId,  // 27
        }
      }).then(res => {
        console.log(res)
        // load(currentPage.value, pageSize.value, deptName.value, manager_name.value, stateValue.value)
        // 重新加载表格
        btnQuery()
      }).catch(e => {
        ElMessage.error(e.error)
        // ElMessage.error(e)
      }).finally(() => {
        // 表单数据清空
        clearForm()
      })
    }

    // 删除功能
    const handleDelete = (index, row) => {
      ElMessageBox.confirm(
          '确认删除？',
          'Warning',
          {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
          }
      ).then(() => {
        delDept(row.id)
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
        // load(currentPage.value, pageSize.value, deptName.value, manager_name.value, stateValue.value)
        // 重新加载表格
        btnQuery()
      }).catch(() => {
        ElMessage({
          type: 'info',
          message: '删除失败',
        })
      })
    }

    // 获取页pageSize
    const handleSizeChange = (val) => {
      load(currentPage.value, val, deptName.value, manager_name.value, stateValue.value)
    }
    // 获取当前页数
    const handleCurrentChange = (val) => {
      load(val, pageSize.value, deptName.value, manager_name.value, stateValue.value)
    }
    onMounted(() => {
      loadAllEmp().then(res => {
        managers.value = res.data
      })
      loadAllDept().then(res => {
        parents.value = res.data
        // console.log(res)
      })
      load(currentPage.value, pageSize.value, deptName.value, manager_name.value, stateValue.value)
    })

    return {
      clearForm,
      handleSelectionChange,
      btnDelMany,
      selectionDel,
      btnQuery,
      drawer,
      total,
      handleEdit,
      handleDelete,
      tableData,
      deptName,
      manager_name,
      currentPage,
      pageSize,
      small,
      background,
      disabled,
      handleSizeChange,
      handleCurrentChange,
      dialogTableVisible,
      dialogFormVisible,
      formLabelWidth,
      form,
      btnEdit,
      options,
      stateValue,
      // confirmEvent,
      btnInsert,
      drawerSize,
      managers,
      parents,
    }
  }
}
</script>
<style scoped>
.demo-pagination-block {
  margin: 10px 0;
  text-align: center;
}
</style>
<style></style>
